<template>
	<view class="container">
		<u-navbar leftText=" " leftIcon=" " title="租约" :fixed="true" :bgColor="'#ffffff'" :placeholder="true"
			:titleStyle="{
				color: '#333',
				fontSize: '16px',
			}">
			<!-- 左侧扫码按钮 -->
		</u-navbar>

		<!-- 租约列表 -->
		<view class="lease-list">
			<view class="lease-item" :key="i" v-for="(item, i) in leaseList">
				<!-- <view class="lease-item"> -->
				<!-- 状态标签 -->
				<view class="status-tags">
					<text class="tag-name">租约{{ i + 1 }}</text>
					<text class="tag-status">{{ item.status_text }}</text>
				</view>

				<!-- 房源图片 -->
				<view class="house-info" v-if="item.build_images.length > 0">
					<image class="house-img" :src="item.build_images[0]" mode="heightFix"></image>
				</view>

				<!-- 当前房间信息 -->
				<view class="room-info">
					<view class="title">当前房间</view>
					<view class="house-detail">
						<image class="thumb" :src="item.house_images[0]" mode="aspectFill"></image>
						<view class="detail-content">
							<view class="name">{{ item.room_name }}</view>
							<view class="price">
								<text class="symbol">¥</text>
								<text class="amount">{{ item.money_zu }}</text>
								<text class="unit">/月</text>
							</view>
						</view>
					</view>
					<view class="house-bottom">
						<view class="owner">
							房东信息：
							<text style="color: #333">
								{{ item.homeowner_name }}；{{ item.homeowner_phone }}
							</text>
						</view>
						<view class="date">
							租赁期限：
							<text style="color: #333">
								{{ item.start_time }}至{{ item.end_time }}
							</text>
						</view>
					</view>
				</view>

				<!-- 我的服务 -->
				<view class="service-section">
					<view class="title">我的服务</view>
					<view class="service-list">
						<view class="service-item" @click="handleService('payment', item.id, item.room_id)">
							<image class="icon" :src="icon[0]" mode="aspectFit"></image>
							<text>租金缴费</text>
						</view>
						<view class="service-item" @click="handleService('bill', item.id, item.room_id)">
							<image class="icon" :src="icon[1]" mode="aspectFit"></image>
							<text>账单服务</text>
						</view>
						<view class="service-item" @click="handleService('repair', item.id, item.room_id)">
							<image class="icon" :src="icon[2]" mode="aspectFit"></image>
							<text>工单服务</text>
						</view>
						<view class="service-item" @click="handleService('contract', item.id)">
							<image class="icon" :src="icon[3]" mode="aspectFit"></image>
							<text>合同查询</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-loadmore :status="status" />
	</view>
</template>

<script>
import {
	Lease,
	LeaseUser
} from "@/api/lease.js";
export default {
	data() {
		return {
			imgUrl: this.$Config.HTTP_REQUEST_URL + "/img/module_img1.png",
			icon: [
				this.$Config.HTTP_REQUEST_URL + "/img/module_icon14.png",
				this.$Config.HTTP_REQUEST_URL + "/img/module_icon15.png",
				this.$Config.HTTP_REQUEST_URL + "/img/module_icon16.png",
				this.$Config.HTTP_REQUEST_URL + "/img/module_icon17.png",
			],
			status: "loadmore",
			queryparams: {
				page: 1,
				limit: 10,
			},
			leaseList: [],
		};
	},
	onShow() {
		if (uni.getStorageSync('userInfo')) {
			let a = 0
			this.$Api.chat.getUserUnReadNumber().then(res => {
				a = res.data.data
				this.$Api.chat.getUserToUserUnReadNumber().then(res => {
					a = a + res.data.data
					if (a > 0) {
						uni.setTabBarBadge({
							index: 3, // TabBar的索引
							text: a + '' // 显示的数字
						});
					} else {
						uni.removeTabBarBadge({
							index: 3, // TabBar的索引
						});
					}
				})
			})
		}
	},
	onLoad() {
		this.getList();
	},
	methods: {
		handleService(type, id, room_id) {
			switch (type) {
				case "payment":
					uni.navigateTo({
						url: "/pages-lease/payment/payment?id=" + id,
					});
					break;
				case "bill":
					uni.navigateTo({
						url: "/pages-lease/bill/bill?id=" + id,
					});
					break;
				case "repair":
					uni.navigateTo({
						url: "/pages-lease/repair/repair?id=" + id + "&room_id=" + room_id,
					});
					break;
				case "contract":
					uni.navigateTo({
						url: "/pages-lease/contract/contract-view?id=" + id,
					});
					break;
			}
		},
		getList() {
			LeaseUser(this.queryparams).then((res) => {
				console.log(res.data.data)
				this.leaseList = res.data.data.map((item) => {
					return {
						...item,
						start_time: item.start_time ? item.start_time.split(" ")[0] : "",
						end_time: item.end_time ? item.end_time.split(" ")[0] : "",
					};
				});
				// 更新状态
				this.status =
					this.leaseList.length < this.queryparams.limit ?
						"nomore" :
						"loadmore";
				uni.stopPullDownRefresh(); // 停止下拉刷新
			});
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.queryparams.page = 1; // 重置为第一页
			this.leaseList = []; // 清空当前列表数据
			this.getList(); // 请求第一页数据
			uni.stopPullDownRefresh(); // 停止下拉刷新
		},
		//上拉加载
		onReachBottom() {
			console.log("Reached bottom. Status:", this.status);
			if (this.status === "loading" || this.status === "nomore") return;
			this.status = "loading";
			this.queryparams.page++; // 增加当前页码
			this.getList();
		},
	},
};
</script>

<style lang="less" scoped>
.container {
	min-height: 100vh;
	background: #f5f6fa;
	padding: 24rpx;
	box-sizing: border-box;
}

.lease-item {
	background: #fff;
	border-radius: 12rpx;
	padding: 24rpx;
	margin-bottom: 24rpx;
}

.status-tags {
	display: flex;
	justify-content: space-between;
	margin-bottom: 24rpx;

	.tag-name {
		font-size: 28rpx;
		color: #0095f8;
		background: rgba(0, 149, 248, 0.1);
		padding: 4rpx 16rpx;
		border-radius: 4rpx;
	}

	.tag-status {
		font-size: 28rpx;
		color: #07c160;
		background: rgba(7, 193, 96, 0.1);
		padding: 4rpx 16rpx;
		border-radius: 4rpx;
	}
}

.house-info {
	margin-bottom: 24rpx;

	.house-img {
		width: 100%;
		height: 320rpx;
		border-radius: 12rpx;
	}
}

.room-info {
	.title {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 24rpx;
	}

	.house-detail {
		display: flex;

		.thumb {
			width: 160rpx;
			height: 160rpx;
			border-radius: 8rpx;
			margin-right: 24rpx;
		}

		.detail-content {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.name {
				font-size: 28rpx;
				color: #333;
				margin-bottom: 16rpx;
			}

			.price {
				margin-bottom: 16rpx;

				.symbol {
					font-size: 24rpx;
					color: #ff5a5f;
				}

				.amount {
					font-size: 32rpx;
					color: #ff5a5f;
					font-weight: bold;
				}

				.unit {
					font-size: 24rpx;
					color: #999;
				}
			}
		}
	}

	.house-bottom {
		margin-top: 20rpx;

		.owner,
		.date {
			font-size: 26rpx;
			color: #999;
			margin-bottom: 8rpx;
		}
	}
}

.service-section {
	margin-top: 32rpx;

	.title {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 24rpx;
	}

	.service-list {
		display: flex;
		justify-content: space-between;

		.service-item {
			display: flex;
			flex-direction: column;
			align-items: center;

			.icon {
				width: 64rpx;
				height: 64rpx;
				margin-bottom: 8rpx;
			}

			text {
				font-size: 24rpx;
				color: #666;
			}
		}
	}
}
</style>